<%@page import="com.carple.dto.Route"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	ArrayList<Route> routesOfWriter = (ArrayList<Route>)request.getAttribute("routesOfWriter");
	ArrayList<Route> routesOfReader = (ArrayList<Route>)request.getAttribute("routesOfReader");
%>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
      	width:100%;
      	height:100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    ///////////////////////////////////showrouteall///////////////////////////////////////////////////////////////
    function initialize() {
    	  var mapOptions = {
    	    zoom: 10,//줌레벨 설
    	    center: new google.maps.LatLng(37.570243, 126.980587),//초기화 맵 화면의 중심 좌표.
    	  mapTypeId: google.maps.MapTypeId.ROADMAP//맵 타입 종류 선택.(ROADMAP 등등)
    	  };
    	  var map = new google.maps.Map(document.getElementById('map-canvas'),
    	                                mapOptions);
    	  var flightPlanCoordinatesOfWriter = [
    	  							<% for (int i = 0; i < routesOfWriter.size(); i++) { %>
    	                               new google.maps.LatLng(<%=routesOfWriter.get(i).getCoordinates() %>),
    	                            <%}%> 
    	                             ];
    	  var flightPathOfWriter = new google.maps.Polyline({
    		    path: flightPlanCoordinatesOfWriter,
    		    geodesic: true,
    		    strokeColor: '#0000FF',
    		    strokeOpacity: 1.0,
    		    strokeWeight: 6
    		    
    		  });
    	  var flightPlanCoordinatesOfReader = [
    	       	  							<% for (int i = 0; i < routesOfReader.size(); i++) { %>
    	       	                               new google.maps.LatLng(<%=routesOfReader.get(i).getCoordinates() %>),
    	       	                            <%}%> 
    	       	                             ];
       	  var flightPathOfReader = new google.maps.Polyline({
       		    path: flightPlanCoordinatesOfReader,
       		    geodesic: true,
       		    strokeColor: '#FF0000',
       		    strokeOpacity: 1.0,
       		    strokeWeight: 6
       		  });
    	  
    	  flightPathOfWriter.setMap(map);
    	  flightPathOfReader.setMap(map);
    	  
    	  var urlOfWriter = '/carple/image/carOfwr.png';
    	  var urlOfReader = '/carple/image/carOfrd.png';

    	  setMarkers(map, mkOfWriter, urlOfWriter);
    	  setMarkers(map, mkOfReader, urlOfReader);
    	}

   		var mkOfWriter = [
 		               <% for (int i = 0; i < routesOfWriter.size(); i++) { %>
     			       	['route<%=i+1%>', <%=routesOfWriter.get(i).getCoordinates() %>, <%=routesOfWriter.get(i).getRouteOrder()%>],		          	
     			        <%}%>  	
     			       ];//marker좌표 배열 생성.
   		var mkOfReader = [
   		               <% for (int i = 0; i < routesOfReader.size(); i++) { %>
       			       	['route<%=i+1%>', <%=routesOfReader.get(i).getCoordinates() %>, <%=routesOfReader.get(i).getRouteOrder()%>],		          	
       			        <%}%>  	
       			       ];//marker좌표 배열 생성.

 
 	
 	


	function setMarkers(map, locations, imageUrl) {
		  var image = {
		    url: imageUrl,
		    size: new google.maps.Size(30, 24),
		    origin: new google.maps.Point(0,0),
		    anchor: new google.maps.Point(15, 32)
		  };
		  var shape = {
		      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
		      type: 'poly'
		  };
		  for (var i = 0; i < locations.length; i++) {
		    var beach = locations[i];
		    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
		    var marker = new google.maps.Marker({
		        position: myLatLng,
		        map: map,
		        icon: image,
		        shape: shape,
		        title: beach[0],
		        zIndex: beach[3]
		    });
		  }
		}

		
google.maps.event.addDomListener(window, 'load', initialize);
/////////////////////////////////////////////showroutewll//////end///////////////////////////////////////////

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>